<div class="container">
    <div class="smallCategory">
        Datasource Configuration
    </div>
    <span class="longInputLabel">Name:</span>
    <input type="text" class="longer" id="dsname"/>
    <br/>
    <span class="longInputLabel">Driver</span>
    <select id="driver" class="longer">
        <option value="mysql">MySQL</option>
        <option value="oracle">Oracle</option><div class="inputLabel"></div>
        <option value="hsql">HSQL</option>
    </select>
    <br/>
    <span class="longInputLabel">URL:</span>
    <input type="text" class="longer" id="url_location" value="jdbc:mysql://localhost:3306/proddevplm"/>
    <br/>
    <span class="longInputLabel">Username:</span>
    <input type="text" class="longer" id="username" value="root"/>
    <br/>
    <span class="longInputLabel">Password:</span>
    <input type="password" class="longer" id="password" value="fckgwq9tj9"/>
    <br/>

    <span class="longInputLabel" style="padding-top:50px;">Test query:</span>
    <input type="text" class="longer" id="testQuery" value="select * from product limit 6"/>
    <span class="button">query</span>
    <br/>

    <span class="longInputLabel" style="padding-top:20px;">&nbsp;</span>
    <span class="button" onclick="testConnection(0)">Test connection</span>
    <span class="button" onclick="testConnection(1)">Save</span>
    <span class="button">Cancel</span>
    <br/>


    <div class="smallCategory">
        Query results
    </div>
    <div id="query_results">No query was executed</div>


</div>
<script>
    function testConnection(type) {
        var driver = $("#driver").val();
        var urlLoc = $("#url_location").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var tq = $("#testQuery").val();
        var cn = $("#dsname").val();
        if (type == 0) {
            post("datasource", {"m":"test",
                "d":driver,
                "url":urlLoc,
                "u":username,
                "p":password,
                "q":tq}, queryDataResponse);
        } else if (type == 1) {
            post("datasource", {"m":"save",
                "cn":cn,
                "d":driver,
                "url":urlLoc,
                "u":username,
                "p":password}, function(){
                	loadContent("ds/manageds");
                });
        }
    }

    function queryDataResponse(data) {
        $("#query_results").html("")
        $("#query_results").append('<table id="queryTable" cellpadding="0" style="width:100%"></table>');
        $("#queryTable").append("<tr class='headerrow' id='queryHeaderTable'></tr>");
        for (var col in data[0]) {
            $("#queryHeaderTable").append('<td>' + col + '</td>');
        }
        var counter = 0;
        for (var row in data) {
            var rowId = "row" + row;
            if (counter++ % 2 == 0)
                $("#queryTable").append('<tr class="celloddrow" id="' + rowId + '"></tr>');
            else
                $("#queryTable").append('<tr class="cellevenrow" id="' + rowId + '"></tr>');
            for (var col in data[row]) {
                $("#" + rowId).append('<td>' + data[row][col] + '</td>');
            }
        }
        $("#query_results").append('</table>');
    }

    getData
</script>